<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head lang="en">
<meta charset="UTF-8">
<script src="${pageContext.request.contextPath }/js/vue.js"></script>
<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
<link rel="stylesheet"
	href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet"
	href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/layer.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.content {
	display: inline-block;
	padding: 10px;
	height: 40px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	font-size: 20px;
	background-color: #f8f8f8;
}

#msg {
	height: 450px;
	margin: 5px;
	padding: 20px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	background: #e8e8e8;
	overflow: scroll;
}

p span {
	height: 30px;
}

.id${sessionScope.user.id}
{
text-align:right;
}
.pop, #msg p span {
	cursor: pointer;
}

.input textarea {
	width: 80%;
	display: inline-block;
	float: left;
}

.name {
	color: blue;
}

.input button {
	width: 10%;
	display: inline-block;
	float: left;
}
</style>
</head>

<body>
	<div id="app">

		<div id="msg">
			<p v-for="chatItem in chatList" :class="'id'+chatItem.user.id">
				<span class="time">{{chatItem.createTime | formatDate}}</span> <span
					@click="atOne(chatItem.user.userName)" class="head"
					v-if="chatItem.user.id != '${sessionScope.user.id }'"> 【 <span
					class="userType">{{dic.dicUserTypes[chatItem.user.userType]}}</span>

					<span class="school">{{dic.dicSchools[chatItem.user.schoolType]}}</span>

					<span class="dept">{{chatItem.user.department}}</span>】
				</span> <span @click="atOne(chatItem.user.userName)" class="name">{{chatItem.user.id
					!= '${sessionScope.user.id }'?chatItem.user.userName:'我'}}:<br>
				</span> <span @click="repeat(chatItem.user.userName)" class="content">{{chatItem.content}}</span>
			</p>
			<hr />
		</div>
		<div id="vue-dingyi-paging">
			<ul>
				
				<li><a class="pageLink" href="#" @click="setPage(curNum-1)">
						</a></li>
				<li v-for="n in 5"><a class="pageLink" href="#"
					v-text="(curNum-2+n)<=0?0:(curNum-1+n)>=totalNum?totaoNum:curNum-1+n" @click="setPage(curNum-2m+n)"
					></a></li>
				<li><a class="pageLink" href="#" @click="setPage(curNum+1)">></a></li>
			</ul>
		</div>

	</div>
</body>
<script>
    
        var app = new Vue({
        el: '#app',
        filters: {
            formatDate: function (value) {
              let date = new Date(value);
              let y = date.getFullYear();
              let MM = date.getMonth() + 1;
              MM = MM < 10 ? ('0' + MM) : MM;
              let d = date.getDate();
              d = d < 10 ? ('0' + d) : d;
              let h = date.getHours();
              h = h < 10 ? ('0' + h) : h;
              let m = date.getMinutes();
              m = m < 10 ? ('0' + m) : m;
              let s = date.getSeconds();
              s = s < 10 ? ('0' + s) : s;
              return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
            }},

        data: function () {
            return {
            	    totalNum: 6, //总页数
            	    curNum: 1, //当前页码
            	  
                dic: {},
                chatList: [
                ],
                chat:{
                	content:'',
                	fromUserId:'${sessionScope.user.id}',
                	fromUserType:'${sessionScope.user.userType}',
                	patentId:'${patentId}',
                	user:{
                		userType:'${sessionScope.user.userType}',
                		schoolType:'${sessionScope.user.schoolType}',
                		department:'${sessionScope.user.department}',
                		userName:'${sessionScope.user.userName}'
                	}
                },
                websocket:{}
            }
        },
        created() {
            let self = this;
           $.ajax({
                url: '${pageContext.request.contextPath}/dicQuery/all.action',
                success(data) {
                    self.dic.dicSchools = self.listToMap(data.data.dicSchools);
                    self.dic.dicUserTypes = self.listToMap(data.data.dicUserTypes);
                    console.log(self.dic);
                    $.ajax({
                        url: '${pageContext.request.contextPath}/chater/getChatListHis.action',
                        method: 'get',
                        data: { 
                            patentId: '${patentId}',
                            pageNum:self.pageNum
                        },
                        success(data) {
                            self.chatList = data.data.chatList;
                        }
                    });
            
                }
            });
           
           
        },
        methods: {
        	setPage: function(num) {
        	      //页码小于等于1
        	      if (num <= 1) {
        	        return this.curNum = 1;
        	      }
        	      //页码大于总页数
        	      if (num >= this.totalNum) {
        	        return this.curNum = this.totalNum;
        	      }
        	      //页码赋给当前页
        	      this.curNum = num;
        	    },
            listToMap(list) {
                let map = {};
                for (let i in list) {
                    map[list[i].typeCode] = list[i].description;
                }
                return map;
            }
            
        }
    });
</script>

</html>